<template>
    <view>
        <view v-for="item in goodsObj" :key="item.id">
            <image :src="item.imgSrc" class="myimg"  mode="widthFix"></image>
            <view class="jingcai"><text>精彩好物不容错过！</text></view>
            <view class="price"><text>￥{{item.goodsPrice}}/500g &nbsp;&nbsp;{{goodsName}}</text></view>
            <view class="jianjie"><text class="goodsname"></text></view>           
        </view>
        <view class="youhui" @click="onToast" ><view class="left">优惠券</view><view class="right">暂无可用<van-icon @ name="arrow" /></view></view> 
        <view class="guige"><view class="xuan">选择商品规格</view><view class="bujinqi"><van-stepper :value='{value}' theme="round"  @change='add' button-size="22"  /></view></view>
        <van-goods-action>
            <van-goods-action-icon disabled icon="chat-o" text="客服" @click="onClickIcon1" />
            <van-goods-action-icon disabled icon="cart-o" text="购物车" @click="onClickIcon2" />
            <van-goods-action-button  type="warning" text="加入购物车" @click="onClickButton1"/>
            <van-goods-action-button disabled type="    danger" text="立即购买" @click="onClickButton2"/>
        </van-goods-action>
    </view>
</template>
<script>
const url = 'http://47.108.197.149:8081'
export default {
    data(){ 
        return{
            name:'张三',
            goodsObj:[],
            value:1,
            goodsName:'',
            goodsNum:'1',
            goodsId:''
        }
    },
    onLoad(){
        this.goodsObj = getApp().globalData.goodsMore
        this.goodsName =  getApp().globalData.goodsMore[0].goodsName 
    },
    methods:{
        onToast() {   //用户点击取消，系统提示取消搜索
            uni.showToast({
                title: "暂无优惠券",
                duration: 2000
            });
        },
        onClickIcon1() {
        },
        onClickIcon2() {
        },
        onClickButton1() {
            this.goodsId = getApp().globalData.goodsMore[0].id
            let userId = getApp().globalData.userInfo[0].userId
            let isLogin = getApp().globalData.isLogin
            if(isLogin == true){
                uni.request({
                url:url+'/app/cart/saveGoodToCart',
                method:'POST',
                data:{
                    wxUserId:userId,
                    goodsId:this.goodsId,
                    quantity:this.goodsNum,
                },
                success(res){
                    uni.showToast({
                        title: `成功加入购物车`,
                        icon: 'success',
                    });
                }
            })
            }else{
                uni.showToast({
                    title: '请登录~',
                    icon:'none',
                    duration: 1000
                });
            }
            
        },
        onClickButton2() {
        },
        add(event){ //增加商品数量
            this.goodsNum = event.detail
        },
    },
    
}
</script>
<style scoped>
.myimg{
    width: 100%;
    height: 400rpx !important;
}
.jingcai{
    font-size: 14px;
    color: rgb(175, 172, 172);
    padding: 5rpx 20rpx;
}
.price{
    font-size: 20px;
    color: red;
    padding: 5rpx 20rpx;
}
.jianjie{
    padding: 10rpx 20rpx;
}
.youhui{
    width: 100%;
    height: 100rpx;
    border-bottom: 5px solid rgb(240, 240, 240);
    border-top: 5px solid rgb(240, 240, 240);
    padding: 0 10rpx;
}
.left{
    color: rgb(150, 148, 148);
    font-size: 14px;
    float: left;
    padding: 30rpx;
}
.right{
    color: rgb(150, 148, 148);
    font-size: 14px;
    float: right;
    padding: 30rpx;
}
.guige{
    width: 100%;
    height: 100rpx;
    border-bottom: 5px solid rgb(240, 240, 240);
    padding: 0 10rpx;
}
.xuan{
    color: rgb(150, 148, 148);
    font-size: 14px;
    float: left;
    padding: 30rpx;
}
.bujinqi{
     color: rgb(150, 148, 148);
    font-size: 14px;
    float: right;
    padding: 30rpx;
}
.goodsname{
    font-size: 18px;
    font-family: unset;
}
</style>